import React from 'react'
import styles from './index.module.less'
import finger_png from '@/resource/template/finger.png'

export default function Finger({ dataSource }: any) {
    const { userBarrier } = dataSource
    const { detail } = userBarrier
    return (
        <div className={styles.container}>
            <img src={finger_png} />
            {detail.map((item: any, idx: number) => {
                return (
                    <div className={styles.box} key={item}>
                        <div className={styles.number}>{idx + 1}</div>
                        <div className={styles.right_content}>
                            <div className={styles.title}>{item?.name}</div>
                            <div className={styles.reason}>{item?.feature}</div>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}
